<template>
    <app-container>
        <app-block is-search>
            <zm-form inline :model="form" ref="searchForm" size="small">
                <zm-form-item prop="name">
                    <el-input v-model="form.name" class="w150" placeholder="请输入员工姓名/账号进行搜索" />
                </zm-form-item>
                <zm-form-item prop="status">
                    <zm-data-select v-model="form.status" :list="STATUS_TYPE" class="w150" placeholder="请选择员工状态" />
                </zm-form-item>
                <zm-form-item>
                    <zm-button t="search" @click="onSearch" />
                    <zm-button t="reset" @click="onReset" />
                    <zm-button @click="onNew" t="add" />
                </zm-form-item>
            </zm-form>
        </app-block>
        <app-block>
            <div class="df-wrap df">
                <div class="w260 br mr20 treeClass">
                    <div class="bb pb10">部门</div>
                    <div v-for="(item, index) in departmentAllList" :key="index">
                        <div class="ptb10">{{ item.name }}</div>
                        <el-tree :data="item.children" :props="defaultProps" :default-expand-all="false" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"></el-tree>
                    </div>
                </div>
                <div class="flex1">
                    <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams">
                    </zm-table-data>
                </div>
            </div>
        </app-block>
        <update-employer v-if="updateVisible" v-model="updateVisible" :row-info="rowInfo" @after-save="afterSave"></update-employer>
        <detail-employer v-if="detailVisible" v-model="detailVisible" :row-info="detailInfo"></detail-employer>
        <transfer-employer v-if="transferVisible" v-model="transferVisible" :obj="userinfo"></transfer-employer>
    </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import UpdateEmployer from './components/UpdateEmployer'
import DetailEmployer from './components/DetailEmployer'
import { columns } from './const'
import { STATUS_TYPE } from '@/model/type'
import systemAccountApis from '@/api/src/systemAccount'
import publicApis from '@/api/src/public'
import TransferEmployer from './components/TransferEmployer.vue'
export default {
  components: { UpdateEmployer, DetailEmployer, TransferEmployer },
  mixins: [tableMixin],
  data () {
    return {
      columns: columns(this),
      form: {
        name: '',
        status: '-1',
        departmentId: '' // 部门Id
      },
      STATUS_TYPE,
      updateVisible: false,
      rowInfo: {},
      detailVisible: false,
      transferVisible: false,
      selectVisible: false,
      userinfo: {},
      detailInfo: {},
      departmentList: [],
      departmentAllList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getDepartment()
  },
  methods: {
    async getDepartment () {
      this.departmentAllList = await publicApis.getAccountApertmentList()
    },
    handleNodeClick (node) {
      this.form.departmentId = node.value
      this.onSearch()
    },
    async loadList () {
      const res = await systemAccountApis.getPageList(this.assignQuery(this.form))
      this.initialTableData(res.list, res.count)
    },
    onNew () {
      this.rowInfo = {}
      this.updateVisible = true
    },
    onEdit (row) {
      this.rowInfo = row
      this.updateVisible = true
    },
    afterSave () {
      this.loadList()
    },
    onDetail (row) {
      this.detailInfo = row
      this.detailVisible = true
    },
    onSwitch (row) {
      let status = row.status === '1' ? '2' : '1'
      let text = row.status === '1' ? '停用' : '恢复'
      this.$confirm(`是否确认将${row.realName}` + '(' + row.userName + ')' + text + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemAccountApis.setStatus({ id: row.id, status: status })
        this.$message.success('操作成功!')
        this.loadList()
      })
    },
    onDelete (row) {
      this.$confirm('是否确认删除该员工？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemAccountApis.delete({ id: row.id })
        this.$message.success('删除成功!')
        this.loadList()
      })
    },
    resetPassword (row) {
      this.$confirm(`确定将【${row.userName}】进行密码重置,重置后密码为123456!`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemAccountApis.setPassWord({ id: row.id })
        this.$message.success('重置成功!')
        this.loadList()
      })
    },
    transfer (info) {
      this.userinfo = info
      this.transferVisible = true
    },
    onReset () {
      this.form = {
        name: '',
        status: '-1',
        departmentId: '' // 部门Id
      }
      this.loadList()
    }
  }
}
</script>

<style lang="scss" scoped>
.treeClass {
  height: 750px;
  overflow: auto;
}
</style>
